@use './variables' as *;

@mixin mq($breakpoint) {
  @if map-has-key($breakpoints, $breakpoint) {
    @media (min-width: #{map-get($breakpoints, $breakpoint)}) {
      @content;
    }
  }
}

@mixin backgroundColorOpacity($color, $opacity: 0.1) {
  background-color: rgba($color, $opacity);
}

@mixin monospaceFontFamily($font-size: 16) {
  $min-font-width: 114;
  $font-size-unit-width: 2;
  font-family: 'Inconsolata', monospace;
  font-variation-settings: 'wdth' $min-font-width -
    ($font-size * $font-size-unit-width);
}
